博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
搭建Hexo博客相册
阅读量:5811 次
发布时间:2019-06-18

本文共 3759 字,大约阅读时间需要 12 分钟。

注意点:hexo的Next主题默认是不含有相册页面的,如果想添加此页面需自行编写

图片的处理

  • 资源图片是保存在云端上,此教程是存放在GitHub上,可以适当修改放在七牛云也行。首先在电脑上随便一个位置创建一个新的文件夹,这里我创建文件夹名称叫Blog_Album,然后打开git,cd到此文件夹执行git init命令创建git仓库,在此文件夹内新建一个文件夹/photos 在这里存放你需要放在博客中的图片。

  • 使用一个Python小脚本对图片进行压缩编辑,并且上传到自己的GitHub,这就需要我们现在GitHub上新建一个Repository,这里我依然命名为Blog_Album, 然后在本地连接远程仓库执行git remote add origin yourrepositroy@gitaddress

  • 然后下载脚本文件至此文件内,此文件需要文件的支持,可以将此文件保存在你的python3包的安装位置 C:\Users\username\AppData\Local\Programs\Python\Python35-32\Lib\site-packages

  • 执行tool.py的时候如果没有PIL库的话会报错,安装即可。安装PIL只需在cmd中执行:pip install Pillow就可以了。 此外图片命名方式需要按照特定方式即:2017-02-02_discriptionofyourpic.jpg,图片的格式支持常见格式,时间和描述之间存在下划线。

  • 执行tool.py的命令:cmd中python tool.py(文件所处位置完整路径),例如:python E:\malizhiBlog\HexoAlbumData\tool.py ,执行后会生成data.json文件,此文件存储了图片的链接,名称和简介,存放位置修改为你的hexo博客主题下特定位置,这里因为是后期加入的相册,所以我在/hexo/themes/next/source/lib中新建一个文件夹album来存放相册文件。所以tool.py生成data.json需要存放在这里。大约在133行中进行修改

- with open("E://YourBlog/themes/next/source/lib/album/data.json","w") as fp:+ with open("YourBolgPath/themes/next/source/lib/album/data.json","w") as fp:复制代码

博客相册页面

  • 在博客根目录下添加photo页面hexo n page photos,在blog的themes的Next中的_config.yml配置文件中menu选项中添加photos:
menu:  home: / || home  about: /about/ || user  categories: /categories/ || th-list  tags: /tags/ || tags  archives: /archives/ || archive  #schedule: /schedule/ || calendar  音乐: /music/ || music+ 相册: /photos  || camera复制代码

在photos中的index.md添加上下面代码

---title: 照片date: 2018-09-02 21:00:00type: photosfancybox: falsecomments: true---
复制代码

从index就可以看出我们还需要添加css文件和js文件,这些文件我已经上传到GitHub中的中,在这里需要把这个文件夹中的所有文件包括此文件夹下的所有目录都拷贝到前面创建的/hexo/themes/next/source/lib/album中。

JS&CSS文件夹中的内容如下:

然后再将 , 两个文件添加到themes/next/source/js/src中。

对ins.js(ins.js在album文件夹中)文件进行一个简单的修正,将里面大约在121和122行左右的连接修改为你的GitHub中图片连接地址

-    var minSrc = 'https://raw.githubusercontent.com/lizhi/Blog_Album/master/min_photos/' + data.link[i];-    var src = 'https://raw.githubusercontent.com/lizhi/Blog_Album/master/photos/' + data.link[i];+    var minSrc = 'https://raw.githubusercontent.com/yougithubname/pathtoyourphotos/min_photos/' + data.link[i];+    var src = 'https://raw.githubusercontent.com/yougithubname/pathtoyourphotos/photos/' + data.link[i];复制代码

确保你的图片地址是正确的,否则加载不出来,检测方法可以将选择一个图片地址看能不能再浏览器中打开。

注意点:图片的链接都是https://raw.githubusercontent.com 开头的,不是图片的存储地址,否则加载不出

其他配置

  • 上面属于资源的配置,下面是引用配置,在next/layout/_layout.swig的头部前添加对js文件的引用如下:
复制代码

在body中添加如下的内容:

{% if page.type === "photos" %}  
{% endif %}复制代码
  • 在/themes/next/layout/_scripts/pages/post-details.swig中添加:
复制代码
  • 当主题设置fancyboxy为True时,在相册页面存在冲突去掉主题的fancybox所以对/themes/next/layout/_partials/head.swig文件进行修改:
+{% if page.type === "photos"  %}+  {% set theme.fancybox = false %}+{% endif %}+{% if page.type !== "photos"  %}+  {% set theme.fancybox = true %}+{% endif %}{% if theme.fancybox  %}  {% set fancybox_css_uri = url_for(theme.vendors._internal + '/fancybox/source/jquery.fancybox.css?v=2.1.5') %}  {% if theme.vendors.fancybox_css %}    {% set fancybox_css_uri = theme.vendors.fancybox_css %}  {% endif %}  
{% endif %}复制代码
  • 效果图:

至此所有的配置已经完成,赶快部署发布吧。

转载于:https://juejin.im/post/5b8bc953518825284910dcdd

你可能感兴趣的文章
一周总结
查看>>
将txt文件转化为json进行操作
查看>>
线性表4 - 数据结构和算法09
查看>>
C语言数据类型char
查看>>
Online Patching--EBS R12.2最大的改进
查看>>
Binary Search Tree Iterator leetcode
查看>>
Oracle性能优化--DBMS_PROFILER
查看>>
uva-317-找规律
查看>>
Event事件的兼容性(转)
查看>>
我的2014-相对奢侈的生活
查看>>
zoj 2412 dfs 求连通分量的个数
查看>>
Java设计模式
查看>>
一文读懂 AOP | 你想要的最全面 AOP 方法探讨
查看>>
Spring Cloud 微服务分布式链路跟踪 Sleuth 与 Zipkin
查看>>
ORM数据库框架 SQLite 常用数据库框架比较 MD
查看>>
华为OJ 名字美丽度
查看>>
微信公众号与APP微信第三方登录账号打通
查看>>
onchange()事件的应用
查看>>
Windows 下最佳的 C++ 开发的 IDE 是什么?
查看>>
软件工程师成长为架构师必备的十项技能
查看>>